import React, { useMemo } from "react";
import TextAtom from "../../UI_KIT/Atoms/Text.Atom";
import TextAtomEnum from "../../UI_KIT/Atoms/Text.Atom/enum";
import HeadTableMolecule from "../../UI_KIT/Molecules/HeadTable.molecule";
import ImageAtom from "../../UI_KIT/Atoms/Image.Atom";
import CloseIcon from "../../shared/icons/close.svg?react";
import ImageEnum from "../../UI_KIT/Atoms/Image.Atom/enum";

interface TableItem {
  id: number;
  name: string;
  [key: string]: any;
}
interface SubtablesProps {
  items?: TableItem[];
  headItems?: { title?: string; className?: string }[];
  columns?: { key: string; name?: string; role?: string; className?: string }[];
  subtablesTitle?: string;
  isLoading?: boolean;
  handleRemove?: (id: number) => void;
}

const Subtables: React.FC<SubtablesProps> = (props) => {
  const { items, headItems, columns, subtablesTitle, isLoading, handleRemove } =
    props;

  const renderProducts = useMemo(
    () => (
      <>
        {items?.map((item, index) => (
          <div key={index} className="py-2 border-b-[1px] border-tiffany">
            <table className="w-full table-fixed">
              <tbody>
                <tr>
                  {columns?.map((column) => (
                    <>
                      {Object.keys(column).map((key) => (
                        <td className={column.className} key={key}>
                          <TextAtom
                            isLoading={isLoading}
                            type={TextAtomEnum.enum_h5}
                          >
                            {item[(column as Record<string, string>)[key]] ??
                              ""}
                          </TextAtom>
                        </td>
                      ))}
                      <td className="w-[10%]">
                        <div className="flex justify-around">
                          <ImageAtom
                            isLoading={isLoading}
                            type={ImageEnum.enum_defaultSvg}
                            icon={<CloseIcon />}
                            onClick={() => handleRemove?.(item.id)}
                            className="fill-tiffany w-6 h-6 cursor-pointer hover:fill-peach"
                          />
                        </div>
                      </td>
                    </>
                  ))}
                </tr>
              </tbody>
            </table>
          </div>
        ))}
      </>
    ),
    [columns, handleRemove, isLoading, items]
  );

  return (
    <div className="mb-10">
      <TextAtom
        isLoading={isLoading}
        type={TextAtomEnum.enum_h3}
        className="mb-5"
      >
        {subtablesTitle}
      </TextAtom>
      <HeadTableMolecule isLoading={isLoading} headItems={headItems} />
      <div className="max-h-[175px] overflow-x-auto overflow-y-auto">
        {renderProducts}
      </div>
    </div>
  );
};
export default React.memo(Subtables);

{
  /* <thead>
            <tr>
              {columns.map((column) => (
                <th key={column.key}>{column.header}</th>
              ))}
            </tr>
          </thead> */
}
